﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        body{
            overflow-x: hidden;
        }
        #Content{
            width: 100%;
            /*height:700px;*/
            border: medium none;
            box-shadow:0px 4px 10px 5px rgba(0,0,0,0.2);
        }
        .layui-nav{
            background: unset!important;
        }
        .layui-nav .layui-nav-item a {
            color: #868686!important;
            font-weight: bold;
            padding-left: 50px;
        }
        .layui-nav i{
            font-weight: normal!important;
            font-size: 18px;
            color: #868686;
            position: absolute;
            left: 20px;
            z-index: 999;
        }
        .layui-nav li :hover{
            color: #1E9FFF!important;
            background: #b6deff!important;
        }
        .layui-nav li :hover i{
            color: #1E9FFF!important;
        }
        .layui-nav-bar {
            display: none;
        }
        .nav_list{
            padding: 10px 0px;
        }
        .nav_list i{
            font-weight: normal!important;
            font-size: 18px;
        }
        .nav_list span{
            margin-left: 10px;
        }
        .nav_list ul li{
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding-left: 35px;
            font-weight: bold;
            color: #868686;
            cursor: pointer;
            box-sizing: border-box;
        }
        .nav_list ul li:hover{
            color: #1E9FFF;
            background: #b6deff;
        }
        .nav_list_hover{
            color: #1E9FFF;
            background: #b6deff;
        }
        .layui-card {
            position: fixed;
            width: 12%;
        }
        .home{
            width: 80%;
            margin: 10px auto;
            background-color: #ffffff;
        }
        .homepage_btn_phone{
            display: none;
        }
        .homepage_btn_phone .layui-nav-child{
            width: 145px;
            text-align: center;
            min-width: unset!important;
            line-height: 50px;
            border: none;
            top: 79px;
            height: 100%;
            box-shadow: 0 -2px 4px rgba(0,0,0,.12);
            margin-left: -145px;
        }
        .layui-col-space20{
            margin: 0px;
        }
    </style>
</head>
<body>
<div class="home">
    <div class="layui-row layui-col-space20">
        <!--手机端个人列表-->
        <div class="homepage_btn_phone">
            <button type="button" class="layui-btn layui-btn-normal p_manage">个人管理</button>
            <button type="button" class="layui-btn layui-btn-normal uploadData">上传数据</button>
            <dl class="layui-nav-child">
                <dd onclick="SwitchPanel(this,'personalData','phone')"><a href="javascript:;">我的资料</a></dd>
                <dd onclick="SwitchPanel(this,'mydraft','phone')"><a href="javascript:;">我的草稿</a></dd>
                <dd onclick="SwitchPanel(this,'mycollect','phone')"><a href="javascript:;">我的收藏</a></dd>
                <dd onclick="SwitchPanel(this,'myapp','phone')"><a href="javascript:;">我的应用</a></dd>
                <dd onclick="SwitchPanel(this,'mymod','phone')"><a href="javascript:;">我的模板</a></dd>
                <dd onclick="SwitchPanel(this,'mydata','phone')"><a href="javascript:;">我的数据</a></dd>
                <dd onclick="SwitchPanel(this,'mystyle','phone')"><a href="javascript:;">我的样式</a></dd>
            </dl>
        </div>
        <div class="layui-col-md2">
            <div class="layui-card" style="box-shadow:0px 0px 10px 5px rgba(0,0,0,0.2); ">
                <div class="layui-card-body" style="height: 700px;margin: 0px;padding: 0px;">
                    <div style="text-align:center;margin:0 auto;padding: 30px 0px;">
                        <img src=""  style="height:80px;width:80px;border-radius: 50%;" id="img"/>
                        <fieldset class="layui-elem-field layui-field-title" style="">
                            <legend class="userName">---</legend>
                        </fieldset>
                        <button type="button" class="layui-btn layui-btn-normal uploadData">上传数据</button>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title " >
                        <legend style="font-size: 14px;font-weight: bold;" >个人管理</legend>
                    </fieldset>
                    <div class="nav_list">
                        <ul>
                            <li onclick="SwitchPanel(this,'personalData')">
                                <i class="layui-icon">&#xe62d;</i>
                                <span> 我的资料</span>
                            </li>
                            <li onclick="SwitchPanel(this,'mydraft')">
                                <i class="layui-icon">&#xe679;</i>
                                <span>我的草稿</span>
                            </li>
                            <li onclick="SwitchPanel(this,'mycollect')">
                                <i class="layui-icon">&#xe640;</i>
                                <span>我的收藏</span>
                            </li>
                            <li  onclick="SwitchPanel(this,'myapp')">
                                <i class="layui-icon">&#xe618;</i>
                                <span>我的应用</span>
                            </li>
                            <li onclick="SwitchPanel(this,'mymod')">
                                <i class="layui-icon">&#xe623;</i>
                                <span>我的模板</span>
                            </li>
                            <li onclick="SwitchPanel(this,'mydata')">
                                <i class="layui-icon">&#xe621;</i>
                                <span>我的数据</span>
                            </li>
                            <li onclick="SwitchPanel(this,'mystyle')">
                                <i class="layui-icon">&#xe632;</i>
                                <span>我的样式</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <iframe  id="Content" name="Content" width="100%" scrolling="no" style="overflow:visible;min-height: 250px;" src="MyDraft.html"></iframe>
        </div>
    </div>
</div>
<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../node_modules/iframeResizer.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="./../../layui/lay/modules/layer.js"></script>
<script src="../../JS/Personal/PanelControl.js"></script>

<script>
    layui.use(['element','form'], function () {
        var element = layui.element //导航的hover效果、二级菜单等功能，需要依赖element模块
            ,form = layui.form;
    });
    $(function () {
        if(parent.getLocalStorage('JSXM') && parent.getLocalStorage('JSXM').userPhoto){
            $('#img').attr('src',parent.getLocalStorage('JSXM').userPhoto)
        }else{
            $('#img').attr('src','../../static/IMG/Personal/photo.png')
        }
        //获取用户昵称
        if (parent.getLocalStorage('JSXM') && parent.getLocalStorage('JSXM').userName) {
            $('.userName').text(parent.getLocalStorage('JSXM').userName)
        }
        $('#Content').iFrameResize([{log: true}]);
        $('.p_manage').click(function () {
            if(  $('.layui-nav-child').css('display') === 'none') {
                $('.layui-nav-child').show().animate({'marginLeft':'0px'},100);
                $('.layui-col-md10').animate({'marginLeft':'150px','width':'100%'},100)
            } else {
                $('.layui-nav-child').hide().animate({'marginLeft':'-145px'},100);
                $('.layui-col-md10').animate({'marginLeft':'0px','width':'unset'},100)
            }
        })
        //上传数据
        $('.uploadData').click(function () {
            parent.uploadData();
        })
    })
</script>

</body>
</html>